<template>
  <div class="box">
    <Heade></Heade>
    <div class="main" @scroll="scroll" ref="main">
      <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
        <van-swipe
          class="my-swipe"
          :autoplay="3000"
          indicator-color="white"
          icon-size="40px"
        >
          <van-swipe-item v-for="item in bannerList" :key="item.id">
            <img :src="item.imgurl" />
          </van-swipe-item>
        </van-swipe>

        <van-grid :column-num="5">
          <van-grid-item
            v-for="(item, index) in navlist"
            :key="index"
            :icon="item.imgurl"
            :text="item.title"
          />
        </van-grid>

        <div class="top10">
          <div class="seckillTop">
            <span>京东秒杀</span>
            <van-count-down :time="time" class="seckill">
              <template #default="timeData">
                <span class="block">{{ timeData.hours }}</span>
                <span class="colon">:</span>
                <span class="block">{{ timeData.minutes }}</span>
                <span class="colon">:</span>
                <span class="block">{{ timeData.seconds }}</span>
              </template>
            </van-count-down>
            <span class="r">爆款轮番秒></span>
          </div>
          <div class="top10 seckillImg">
            <ul class="seckillbox">
              <li
                v-for="item in seckillList"
                :key="item.proid"
                @click="jumpTo(item.proid)"
              >
                <img :src="item.img1" alt="" />
                <p>￥{{ item.originprice }}</p>
              </li>
            </ul>
          </div>
        </div>

        <div class="top10">
          <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
          >
            <ul :class="isShow ? 'proList1' : 'proList2'">
              <li
                class="van-hairline--bottom van-hairline--right"
                v-for="item in proList"
                :key="item.proid"
                @click="jumpTo(item.proid)"
              >
                <img :src="item.img1" />
                <div>
                  <h3 class="van-multi-ellipsis--l3">
                    <span class="jd">京东超市</span>{{ item.proname }}
                  </h3>
                  <p>￥{{ item.originprice }}</p>
                  <strong
                    ><span class="zy">自营</span
                    ><span class="pl">20万+条评论</span
                    ><a href="#" class="xs">看相似</a></strong
                  >
                </div>
              </li>
            </ul>
          </van-list>

          <div class="iconFl">
            <van-icon
              name="bars"
              class="icon"
              v-if="isShow"
              @click="isShow = !isShow"
            />
            <van-icon
              name="apps-o"
              class="icon"
              v-else
              @click="isShow = !isShow"
            />
          </div>
        </div>
      </van-pull-refresh>
    </div>
    <van-icon
      name="back-top"
      class="back"
      v-if="scrollHeight > 600"
      @click="backTop"
    />
  </div>
</template>

<script>
// import myAxios from "../utils/mock";
// import qAxios from "../utils/request";
import Heade from "../components/Home/Heade.vue";
import Vue from "vue";
import {
  Swipe,
  SwipeItem,
  Grid,
  GridItem,
  CountDown,
  Icon,
  List,
  PullRefresh,
} from "vant";
import {
  getBannerList,
  getNavList,
  getSeckillList,
  getProList,
} from "../api/home";
Vue.use(Grid);
Vue.use(GridItem);
Vue.use(Swipe);
Vue.use(SwipeItem);
Vue.use(CountDown);
Vue.use(Icon);
Vue.use(List);
Vue.use(PullRefresh);

export default {
  name: "Home",
  components: {
    Heade,
  },
  data() {
    return {
      timer: null,
      loading: false,
      finished: false,
      count: 2,
      isLoading: false,
      isShow: false,
      time: 24 * 60 * 60 * 1000,
      navlist: [],
      bannerList: [],
      seckillList: [],
      proList: [],
      scrollHeight: 0,
    };
  },
  methods: {
    // 商品上拉加载
    onLoad() {
      this.loading = true;
      setTimeout(() => {
        // qAxios.get("/pro/list", { params: { count: this.count, limitNum: 12 } })
        getProList({ count: this.count, limitNum: 12 }).then((data) => {
          // console.log(data.data.data);
          this.loading = false;
          if (data.data.data.length == 0) {
            this.finished = true;
          } else {
            this.proList = [...this.proList, ...data.data.data]; // this.prolist = 原有的数据+ 新加载出来的数据
            this.count++;
          }
        });
      }, 1000);
    },
    // 主页下拉刷新变成第一页
    onRefresh() {
      this.isLoading = false;
      setTimeout(() => {
         getProList().then((data) => {
          //  加载的第一页
          this.proList = data.data.data;
          this.count = 2;
        });
      }, 1000);
    },
    //点击商品跳转详情页
    jumpTo(proid) {
      this.$router.push("/details/" + proid);
    },
    // main卷出去的高度变换
    scroll() {
      this.scrollHeight = this.$refs.main.scrollTop;
    },
    //点击回到顶部
    backTop() {
      this.timer = setInterval(() => {
        if (this.$refs.main.scrollTop <= 0) {
          clearInterval(this.timer);
        }
        this.$refs.main.scrollTop -= 100;
      }, 15);
    },
  },
  created() {
    getBannerList().then((res) => {
      this.bannerList = res.data;
    });
    getNavList().then((res) => {
      this.navlist = res.data;
    });
    // qAxios.get("/pro/seckilllist", { params: { count: 1, limitNum: 10 } })
    getSeckillList({ count: 1, limitNum: 10 }).then((res) => {
      // console.log(res.data.data);
      this.seckillList = res.data.data;
    });
  },
};
</script>

<style>
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
  height: 1.5rem;
}
.my-swipe img {
  width: 100%;
}
.top10 {
  margin-top: 0.1rem;
  min-height: 0.01rem;
  background-color: #fff;
}
.colon {
  display: inline-block;
  margin: 0 4px;
  color: #ee0a24;
}
.block {
  display: inline-block;
  width: 22px;
  color: #fff;
  font-size: 12px;
  text-align: center;
  background-color: #ee0a24;
  border-radius: 0.05rem;
}
.seckill {
  display: inline-block;
  margin-left: 0.2rem;
}
.seckillTop {
  display: flex;
  justify-content: space-around;
  border-radius: 0.4rem;
  background-color: #fff;
  align-content: center;
  height: 0.2rem;
  padding-top: 0.05rem;
}
.seckillTop .r {
  color: #ee0a24;
  font-size: 12px;
  line-height: 0.2rem;
}
.seckillbox {
  display: flex;
  flex-direction: row;
  overflow-x: auto;
}
.seckillImg {
  padding-top: 0.1rem;
}
.seckillbox li img {
  width: 0.6rem;
  height: 0.7rem;
}
.seckillbox li {
  height: 1rem;
  margin: 0 0.01rem;
}
.seckillbox li p {
  color: #ee0a24;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
}
.proList1 li {
  display: flex;
  justify-content: space-between;
  margin: 0 0.1rem 0.1rem 0;
}
.proList1 li img {
  width: 35%;
  margin-right: 0.2rem;
}
.proList1 li > div {
  width: 63%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.proList1 li h3 {
  font-size: 14px;
  font-weight: normal;
}
.proList1 li p {
  color: #ee0a24;
  line-height: 0.4rem;
  font-size: 20px;
}
strong {
  font-weight: normal;
}

/* 双列情况 */
.proList2 {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  justify-content: space-between;
}
.proList2 li {
  width: 49%;
  margin-bottom: 0.1rem;
}
.proList2 li img {
  width: 100%;
  height: 2rem;
}
.proList2 li > div {
  min-height: 0.8rem;
}
.proList2 li h3 {
  font-size: 14px;
  font-weight: normal;
}
.proList2 li p {
  color: #ee0a24;
  line-height: 0.4rem;
  font-size: 20px;
}
.jd {
  display: inline-block;
  width: 0.5rem;
  height: 0.15rem;
  background-color: rgb(9, 192, 122);
  color: azure;
  font-size: 10px;
  border-radius: 0.05rem;
  text-align: center;
  line-height: 0.15rem;
  margin-right: 0.04rem;
}
.zy {
  display: inline-block;
  width: 0.3rem;
  height: 0.18rem;
  background-color: rgb(218, 43, 37);
  color: azure;
  font-size: 10px;
  border-radius: 0.05rem;
  text-align: center;
  line-height: 0.18rem;
  margin-right: 0.08rem;
}
.pl {
  font-size: 10px;
  color: gray;
}
.xs {
  display: inline-block;
  width: 0.4rem;
  height: 0.18rem;
  background-color: rgb(214, 202, 202);
  color: rgb(47, 52, 52);
  font-size: 10px;
  border-radius: 0.05rem;
  text-align: center;
  line-height: 0.18rem;
  margin-left: 0.08rem;
}
.iconFl {
  position: fixed;
  right: 0.3rem;
  bottom: 0.8rem;
  width: 0.3rem;
  height: 0.3rem;
}
.icon {
  font-size: 30px;
  color: rgb(161, 155, 155);
}
.back {
  position: fixed;
  right: 0.3rem;
  bottom: 1.2rem;
  font-size: 30px;
  color: rgb(161, 155, 155);
  font-weight: 700;
}
</style>
